@import "../../assets/css/theme.less";
.user {
  margin: 2px 5px;
  padding:0;
  .user_box{
    border-radius: 4px;
    display: flex;
    height: 48px;
    padding:0 5px;
    align-items: center;
    width:100%;
    .headpic{
      width:30px;
      flex-basis: 30px;
      height:30px;
      flex-shrink: 0;
      border-radius: 50%;
      position: relative;
      img{
        width:30px;
        height:30px;
        border-radius: 50%;
      }
      .new_num{
        position: absolute;top:-4px;right:-2px;line-height: 14px;background:red;color:#fff;
        font-size: 12px;padding:0 4px;border-radius: 10px;
      }
    }
    .text{
      width:0;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 5px;
      .name{
        font-size: 14px;line-height: 16px;color:#5e5e5e;
        display: flex;width:100%;padding:0;
        b{
          width:0;
          flex-grow: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span{
          white-space: nowrap;
          padding-left: 5px;
          flex-shrink: 0;
          display: inline-block;
        }
      }
      .newmsg{
        width:100%;
        font-size:12px;line-height: 14px;color:#a1a1a1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    &.active{
      background:@theme_color;
      .name{
        color:#fff;
      }
      .newmsg{
        color:rgba(255,255,255,0.8);
      }
    }
  }
}
